<template>
  <div>
    <div class="order-items-content">
      <div class="order-items-left">
        <div class="order-items-left-img" @click="goPageDetail(data.orderNo)">
          <x-img :scroller="scroll" :src="data.goodses[0].goodsImageUrl" :offset="500"></x-img>
        </div>
      </div>
      <div class="order-items-right">
        <div class="order-items-left-name"  @click="goPageDetail(data.orderNo)">
          {{data.goodses[0].goodsName}}
        </div>
        <div class="order-items-left-remake"  @click="goPageDetail(data.orderNo)">
          {{data.goodses[0].skuName}}
        </div>
        <div class="order-items-left-flex"  @click="goPageDetail(data.orderNo)">
          <div class="order-items-left-flex-left">
            {{data.goodses[0].goodsPrice|currency}}
          </div>
          <div class="order-items-left-flex-right">
            数量：{{data.goodses[0].num}}
          </div>
        </div>
        <div class="order-items-left-flex-total">
          <span class="order-items-left-flex-total-tag">共2件商品,合计</span>
          <span class="order-items-left-flex-total-price">{{data.goodses[0].num*data.goodses[0].goodsPrice | currency}}</span>
          <span class="order-items-left-flex-total-tag">含运费({{data.mailPrice |currency}})</span>
        </div>
        <div class="order-items-left-but">
        <div v-if="data.status==5||data.status==4" @click="goPage()" class="order-items-left-but-log">查看物流</div>  <div class="order-items-left-but-l">立即付款</div>
        </div>
      </div>
    </div>
    <!-- <div class="order-items-content-scroll" v-else>
            <div style="width:100%;    overflow: scroll;-webkit-overflow-scrolling: touch">
                <scroller lock-y scrollbar-x :bounce=false :scrollbar-x=false>
                    <div class="order-items-box" :style="{width:muWidth}">
                        <div class="order-items-box-item" v-for="i in 4">
                            <img src="../../assets/images/test1.png" />
                        </div>
                    </div>
                </scroller>
            </div>
            <div class="order-items-content">
                <div class="order-items-left">
                    <div class="order-items-left-img">

                    </div>
                </div>
                <div class="order-items-right">
                    <div class="order-items-left-flex-total">
                        <span class="order-items-left-flex-total-tag">共2件商品,合计</span>
                        <span class="order-items-left-flex-total-price">￥6687</span>
                        <span class="order-items-left-flex-total-tag">含运费(￥0)</span>
                    </div>
                    <div class="order-items-left-but">
                        <div class="order-items-left-but-l">立即付款</div>
                    </div>
                </div>
            </div>
        </div> -->
  </div>
</template>
<script>
import { Scroller } from "vux";
import XImg from "@/components/x-img";
export default {
  props: ["data", "scroll"],
  model: {
    prop: "data"
  },
  data() {
    return {};
  },
  components: { Scroller, XImg },
  computed: {
    muWidth() {
      return 4 * 3.0133 + "rem";
    }
  },
  methods:{
    goPage(){
      this.navigation_push("logistics")
    },
    goPageDetail(id){
       this.navigation_push("orderDetail",{ id: id });
    }
  }
};
</script>
<style lang="scss" >
.order-items-box {
  height: 2.8rem;
  position: relative;
  width: 1490px;
}
.order-items-box-item {
  width: 2.8rem;
  height: 2.8rem;
  background-color: #ccc;
  display: inline-block;
  margin-left: 0.2133rem;
  float: left;
  text-align: center;
  img {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.order-items-content {
  display: flex;
}
.order-items-content-scroll {
  .order-items-content-scroll-img {
    padding-left: 0.2133rem;
    img {
      width: 2.8rem;
      height: 2.8rem;
    }
  }
}
.order-items-left {
  padding-left: 0.2133rem;
  .order-items-left-img {
    img {
      width: 2.8rem;
      height: 2.8rem;
    }
  }
}
.order-items-right {
  flex: 1;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 0.3067rem 0.4533rem 0.36rem;
  .order-items-left-name {
    color: #333333;
    font-size: 0.3467rem;
    height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .order-items-left-remake {
    font-size: 0.2933rem;
    color: #999999;
    margin-top: 0.2133rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-items-left-flex {
    display: flex;
    margin-top: 0.6667rem;
    .order-items-left-flex-left {
      flex: 1;
      color: #f30901;
      font-size: 0.4267rem;
    }
    .order-items-left-flex-right {
      font-size: 0.3467rem;
      color: #333333;
    }
  }
  .order-items-left-flex-total {
    font-size: 0.3467rem;
    margin-top: 0.6267rem;
    text-align: right;
    .order-items-left-flex-total-tag {
      color: #333333;
    }
    .order-items-left-flex-total-price {
      color: #f30901;
    }
  }
  .order-items-left-but {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5733rem;
    .order-items-left-but-log{
      margin-right: 0.5333rem;
       border-radius: 0.0533rem;
      width: 1.9733rem;
      height: 0.6667rem;
      font-size: 0.3467rem;
      display: flex;
      justify-content: center;
      align-items: center;
          border: 1px solid #a5a5a5;
    }
    .order-items-left-but-l {
      background: linear-gradient(
        90deg,
        rgba(242, 3, 0, 1),
        rgba(254, 78, 19, 1)
      );
      border-radius: 0.0533rem;
      width: 1.9733rem;
      height: 0.6667rem;
      color: #fff;
      font-size: 0.3467rem;
      display: flex;
      justify-content: center;
      align-items: center;
          border: 1px solid #fd4611;
    }
  }
}
</style>
